// import React, { FC } from 'react'
import { HashRouter, Switch, Route } from 'react-router-dom'
import Home from './pages/home'
import Shop from './pages/shop'
import Signup from './pages/signup'
import Signin from './pages/signin'
import UserDashboard from './pages/user-dashboard'
import AdminDashboard from './pages/admin/dashboard'
import CreateCategory from './pages/admin/create-category'
import CreateProduct from './pages/admin/create-product'

import ProtectRoute from './components/protect-route'

function NotFound() {
  return <p>404</p>
}

const App = () => {
  return (
    <HashRouter>
      <Switch>
        <Route path='/' component={Home} exact></Route>
        <Route path='/shop' component={Shop} exact></Route>
        <Route path='/signup' component={Signup} exact></Route>
        <Route path='/signin' component={Signin} exact></Route>
        <ProtectRoute
          path='/user/dashboard'
          role={0}
          component={UserDashboard}
        ></ProtectRoute>
        <ProtectRoute
          path='/admin/dashboard'
          role={1}
          component={AdminDashboard}
        ></ProtectRoute>
        <ProtectRoute
          path='/admin/create/category'
          role={1}
          component={CreateCategory}
        ></ProtectRoute>
        <ProtectRoute
          path='/admin/create/product'
          role={1}
          component={CreateProduct}
        ></ProtectRoute>
        <Route component={NotFound}></Route>
      </Switch>
    </HashRouter>
  )
}

export default App
